<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Punsarn Asia</title>

<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="scripts/jquery.scrollto.js"> </script>
<script type="text/javascript">
	function active(obj){
		obj.fadeTo('fast',1.0,null);

		$("#butterfly").clearQueue();
		var id = obj.attr('id');
		if(id=='enterprise'){
			$("#butterfly").clearQueue();
			$("#butterfly").animate({left:'100px', bottom:'840px'},2000,null);
		}

		if(id=='social'){
			$("#butterfly").clearQueue();
			$("#butterfly").animate({left:'600px', bottom:'770px'},2000,null);
		}

	}
	
	function sleep(obj){
		obj.fadeTo('fast',0.4,null);

		
		var id = obj.attr('id');
		if(id=='enterprise'){
			$("#butterfly").clearQueue();
			$("#butterfly").animate({left:'100px', bottom:'440px'},2000,null);
		}

		if(id=='social'){
			$("#butterfly").clearQueue();
			$("#butterfly").animate({left:'890px', bottom:'365px'},2000,null);
		}
	}
	
	function alertOff(){


		$("#rights").ScrollTo({
			delay: 1000,
			duration: 2500,
			easing: 'linear'
		});

		$("#punsarn").ScrollTo({
			delay: 800,
			duration: 1500,
			easing: 'linear'
		});

		$("#popup-back").fadeOut(500);
		
		$("#popup-front").animate({
				opacity: 0,
				top: '+=4000',
			}, 2000, function(){
						$("#popup-front").css("display","none");
					}
			);
		
	}

	jQuery(document).ready(function($) {
	/*
		$("#rights").ScrollTo({
			duration: 2000,
			easing: 'linear'
		});

		$("#punsarn").ScrollTo({
			duration: 2000,
			easing: 'linear'
		});
	*/
		var url = window.location.href;
		if(url.indexOf('popup') > 0 && url.indexOf('#')<0){
			$("#popup-back").fadeIn(500).css("display","block");
			$("#popup-front").css("display","block");
			$("#popup-front").css("opacity","0.5");
			$("#popup-front").animate({
				opacity: 1,
				top: '-=50',
			}, 1000, null);
		}

		$("#enterprise").fadeTo('slow',0.4,null);
		$("#social").fadeTo('slow',0.4,null);

		/*
		$(function() {
		  setInterval(function() {
			$("#butterfly").animate({left:'450px', bottom:'400px'},2000,null);
			$("#butterfly").animate({left:'890px', bottom:'365px'},2000,null);
			$("#butterfly").animate({left:'890px', bottom:'365px'},5000,null);
			$("#butterfly").animate({left:'580px', bottom:'435px'},2000,null);
			$("#butterfly").animate({left:'100px', bottom:'440px'},2000,null);
			$("#butterfly").animate({left:'100px', bottom:'440px'},5000,null);
		  }, 10000);
		 });
		 */
		
		$(function() {
		  setInterval(function() {
			for(var i=0; i<8; i++){
				$("#you"+i).fadeTo(Math.random()*1000,0.2,null);
				$("#you"+i).fadeTo('slow',1.0,null);
			}
		  },2000);
		});
	});
</script>

<style type="text/css">
	body{
		margin:0px;
		color:#333;
		background-color:#EFEFEF;
		font-size:12pt;
	}
	h3{
		color:#F60;
	}
	h2{
		color:#555;
	}
	.you h4{
		font-size:32px;
		color:#F30;
	}
	.block{
		margin-top:20px;
		margin-bottom:30px;
	}
	.text-center{
		text-align:center;
	}
	.text-left{
		text-align:left;
	}
	.text-middle{
		vertical-align:middle;
	}
	div.body{
		width:1000px;
		margin:20px;
		margin-top:0px;
		/*border:#EFEFEF 10px solid;*/
		background-color:#FFF;
		padding:20px 0px;
	}
	div.content{
		background-color:#FFF;
		border:solid 1px #999;
		border-radius:5px;
		padding:10px 15px;
		box-shadow: 1px 1px 3px #888;
	}
	
	div.label{
		background-color:#AAA;
		border:solid 1px #999;
		border-radius:15px;
		padding:2px;
		box-shadow: inset 1px 1px 3px #888;
		text-shadow: 1px 1px 1px #000;
		color:#fff;
		font-weight:bold;
		text-align:center;
		
	}
	
	div.wrap{
		width:900px;
	}
	
	div.wrap div.left{
		float:left;
   		width:300px;
		background-color:#CCC;
		padding:10px 20px;
		height:100%;
	}
	
	div.wrap div.arrow{
		width:5px;
		height:35px;
		float:left;
		background:url(arrow-right.png) no-repeat right bottom;
	}
	
	div.wrap div.right{
		float:right;
  		width:500px;
		padding:0px 10px 0px 20px;
		margin:10px;
	}
	div.social-enterprise{
		height:900px;
		background-image:url(images/social-enterprise.png);
		background-repeat:no-repeat;
		background-position:center; 
		position:relative;
	}
	
	div.table{
		display:table;
		width:100%;
	}
	
	div.row{
		display:table-row;
	}
	
	div.cell50{
		display:table-cell;
		width:50%;
		padding:20px 40px 0px 40px;
	}
	div.cell25{
		display:table-cell;
		width:25%;
		padding:20px 10px 0px 10px;
	}
	
	div.cell20{
		display:table-cell;
		width:20%;
		height:60px;
		padding:5px;
		vertical-align:middle;
		font-size:24px;
		font-weight:bold;
		color:#fff;
	}
	
	div.underline {
		height:13px;
		background-image:url(images/underline.png);
		background-repeat:repeat-x;
	}

	div.popup-back {
		background-color:#000;
		position:absolute;
		opacity:0.9;
		top:0px;
		left:0px;
		height:200%;
		width:100%;
		display:none;
	}
	div.popup-front {
		position:absolute;
		top:100px;
		text-align:center;
		width:100%;
		display:none;
	}
</style>


</head>

<body>
	<center>
    	<div class="body">
    
            <div id="punsarn" class="block" style="margin:10px 0 0 0">
            	<img src="images/punsarn-logo.png"  width="150px" alt="Punsarn Asia" />
            </div>
            <div class="block"  style="margin-top:10px">
            	<img src="images/learning.jpg" width="1000px" height="300px"  alt="Punsarn Asia" />
                <div class="underline" ></div>
            </div>
            <h2>
                ปันสาร เอเชีย
           </h2>
            <div class="block content text-left" style="width:700px">
            	<p class="about">
                	<b>ปันสาร เอเชีย</b> (PUNSARN ASIA) เป็นองค์กรไม่แสวงหาผลกำไร หรือ NPO (Non-Profit Organization) จัดตั้งขึ้นเพื่อส่งเสริมการเรียนรู้สู่ชุมชนด้วยเทคโนโลยี
                </p>
                <p class="about">
                	เพราะเราเชื่อว่าความรู้เกิดจากการแบ่งปัน ปันสาร จึงสนุบสนุนทุกการแบ่งปันทางความรู้ ด้วยทัศนะที่ว่า
                </p>
                <center>
                	<h3>"ปันกันรู้ ร่วมกันคิด"</h3>
                </center>
                <p class="about">
                	ด้วยทัศนคตินี้ จึงได้รับความไว้วางใจจากสิบหน่วยงานภาคเอกชนเข้ามาสนับสนุน ให้ความช่วยเหลือเพื่อให้ ปันสาร สามารถดำเนินงานตามเจตนารมย์นี้ต่อไปได้
                </p>
          
            </div>
            <div></div>
            <div class="block">
             	<h2>
                	ร่วมกับ
                </h2>
            	
  <div class="table text-center text-middle">
                	<div class="row">
                    	<div class="cell20" style="background-color:#c6d9f1">DPTF</div>
                        <div class="cell20" style="background-color:#4f81bd">Samart</div>
                        <div class="cell20" style="background-color:#b9cde5">DPTF</div>
                        <div class="cell20" style="background-color:#c6d9f1">Samart</div>
                        <div class="cell20" style="background-color:#8eb4e3">DPTF</div>
                    </div>
                    <div class="row">
                    	<div class="cell20" style="background-color:#8eb4e3">Samart</div>
                        <div class="cell20" style="background-color:#c6d9f1">DPTF</div>
                        <div class="cell20" style="background-color:#8eb4e3">Samart</div>
                        <div class="cell20" style="background-color:#558ed5">DPTF</div>
                        <div class="cell20" style="background-color:#c6d9f1">Samart</div>
                    </div>
                </div>
            </div>
            
            <div class="block" style="position:relative">
             	<h2>
                	จัดทำ
                </h2>
				
                <div class="social-enterprise">
					<img id="butterfly" style="position:absolute;left:100px;bottom:440px;" width="45" src="images/butterfly.gif" />
                	<div class="table">
                    	<div class="row">
                        	<div class="cell50">
                            	<div onmouseover="active($(this))" onmouseout="sleep($(this))" id="enterprise" class="content text-left">
                                  <h3>ด้านธุรกิจ</h3>
                            	  <p>ถึงแม้ว่า ปันสาร จะเป็นองค์กรไม่แสวงหาผลกำไร แต่องค์กรจำเป็นต้องมีรายได้มาเลี้ยงดูกิจการ ในด้านธุรกิจนั้นปันสารได้รับผิดชอบดังนี้                       	  </p>
                            	  <ul>
                                   	  <li>เป็นที่ปรึกษาให้กับหน่วยงานต่างๆ ทั้งรัฐบาล และเอกชน</li>
                                    	<li>ออกแบบระบบสำหรับสนับสนุนการเก็บรักษาเอกสารในที่ทำงาน (Archival Information System)</li>
                                    </ul>
                                    ทั้งนี้ก็เพื่อนำรายได้มาเป็นค่าใช้จ่ายขององค์ก รตลอดจนเงินเดือนและสวัสดิการของสมาชิกปันสารด้วย
                                </div>
                            </div>
<div class="cell50 text-left" >
                            	<br/>
                                <br/>
                           	 	<div onmouseover="active($(this))" onmouseout="sleep($(this))"  id="social" class="content text-left">
                                 <h3>ด้านสังคม</h3>
                                <p>จากนั้นก็นำรายได้ที่เหลือมาช่วยกันคิดและพัฒนาโครงงาน ให้เกิดประโยชน์กับสังคมการศึกษาในด้านเทคโนโลยี
                           	 	  <ul>
                                    <li>วางโครงสร้างไอทีเพื่อแบ่งปันสื่อการเรียนการสอนให้กับนักเรียน</li>
                                    <li>วางโครงสร้างห้องสมุดต้นแบบเพื่อการแบ่งปันข้อมูลระหว่างโรงเรียน</li>
                                    <li>อื่นๆ</li>
                                  </ul>
       	 	  ในด้านนี้ถือว่าเป็นด้านหลักของปันสาร และจำเป็นต้องมีผู้มาร่วมคิดร่วมพัฒนาอย่างไม่หยุดนิ่ง</p></div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
          
     
     	 <div class="block" >
             	<h2>โดย </h2>
                
                <div class="table">
                    	<div class="row text-center">
                        	<div class="cell25">
                            	<div class="content">
                                	<img src="images/members/joe.jpg" width="190" />
                                	<h4>Pongtawat Chippimolchai</h4>
                                    CEO and Developer
                              </div>
                            </div>

                            <div class="cell25">
                            	<div class="content">
                                	<img src="images/members/pao.jpg" width="190" />
                                	<h4>Nimit Pattanasri</h4>
               Senior Software Engineer
                                </div>
                            </div>

						    <div class="cell25">
                            	<div class="content">
                                	<img src="images/members/toey.jpg" width="190" />
                                	<h4>Neelawat Intaraksa</h4>
               Senior Information Officer
                                </div>
                            </div>

                            <div class="cell25">
                            	
                            	<div class="content">
                                	<img src="images/members/nan.jpg" width="190" />
                                	<h4>Rathachai Chawuthai</h4>
              Senior Information Architect
                                </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="row you text-center">
                        	<div class="cell25">
                            	<div class="content">
                                	<img id="you0"  src="images/members/you.png" />
                                	<h4>You</h4>
               Software Developer<br/>Google AppEngine
                              </div>
                            </div>
                            <div class="cell25">
                            	<div class="content">
                                	<img id="you1"  src="images/members/you.png" />
                                	<h4>You</h4>
				 Software Developer<br/>Google AppEngine                                </div>
                            </div>
                            <div class="cell25">
                            	<div class="content">
                                	<img id="you2"  src="images/members/you.png" />
                                	<h4>You</h4>
				Web Developer<br/>HTML5 CSS jQuery                                </div>
                            </div>
                            <div class="cell25">
                            	
                            	<div class="content">
                                	<img id="you3"  src="images/members/you.png" />
                                	<h4>You</h4>
				Web Developer<br/>HTML5 CSS jQuery                                </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row you text-center">
                        	<div class="cell25">
                            	<div class="content">
                                	<img id="you4"  src="images/members/you.png" />
                                	<h4>You</h4>
				Mobile Developer<br/>Android
                              </div>
                            </div>
                            <div class="cell25">
                            	<div class="content">
                                	<img id="you5"  src="images/members/you.png" />
                                	<h4>You</h4>
				Mobile Developer<br/>Android
                                </div>
                            </div>
                            <div class="cell25">
                            	<div class="content">
                                	<img id="you6" src="images/members/you.png" />
                                	<h4>You</h4>
                                    Quality Assurance
                                </div>
                            </div>
                            <div class="cell25">
                            	
                            	<div class="content">
                                	<img id="you7" src="images/members/you.png" />
                                	<h4>You</h4>
                                     Quality Assurance
                                </div>
                            </div>
                      </div>
                            
                   <div class="block">
                   		<h2>และ </h2>
                   		<a id="jobs" class="text-center" >
   	    					<img  src="images/jobs.png"/>
                        </a>
                    </div>
                
              </div>  
    	</div>

		<div id="popup-back" class="popup-back">
		</div>

		<div id="popup-front"" onclick="alertOff()" class="popup-front">
			<a href="#" class="text-center" >
				<span style="color:#fff">เข้าสู่เว็ปไซต์</span>
				<br/>
   	    		<img  src="images/jobs.png" width="1200"/>
				<br/>
				<span style="color:#fff">Back to our Website</span>
            </a>
		</div>
        
        <footer id="rights">
        	All site contents copyright ©2013-2015 
        </footer>
        <br/>
	</center>
</body>
